<template>

    <!--<el-row>-->
      <!--<el-form-item>-->
        <!---->
      <!--</el-form-item>-->
    <!--</el-row>-->
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="form uploadform">
      <el-form-item>
        <el-upload
          ref="upload"
          :headers="aaaheader"
          class="upload-demo"
          name="file"
          :action="url"
          :on-preview="handlePreview"
          multiple
          accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          :before-upload="beforeAvatarUpload"
          :data='token'
          :on-progress="handleProcess"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :auto-upload="false"
          :on-change="handleChange"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :file-list="fileList">
          <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
          <el-button size="small" type="primary" @click="submitUpload">确认上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
        </el-upload>
        <el-upload
          class="upload-demo"
          :action="url"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :headers="aaaheader"
          :data='token'
          multiple
          accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          :limit="3"
          :file-list="fileList1">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
    </el-form>

</template>

<script>
  import { getToken } from '@/utils/auth'
  // import data from '@//api/data'
  // import methods from '@//api/method'
  export default{
    data() {
      return {
        aaaheader:{
          'Authorization': getToken()
        },
        ruleForm: {
          name: '上传Form',
          isShow: '0'
        },
        fileList:[],
        fileList1:[],
        token:{
          accessToken:''
        },
        url: process.env.BASE_API+'/api/isp/manager/xlb/order/import'
      }
    },
    methods:{
      handleProcess(){
        console.log('进入上传时的钩子')
      },
      beforeAvatarUpload(file) {

      },
      handlePreview(file) {
        console.log('进入on-preview');
      },
      handleChange(file, fileList) {
        let Xls = file.name.split('.');
        if(Xls[1] === 'xls'||Xls[1] === 'xlsx'){
          return file
        }else {
          this.$message.error('上传文件只能是 xls/xlsx 格式!')
          this.fileList = [];
          // 清空上传列表
          this.$refs.upload.clearFiles();
          return false
        }
        console.log('进入on-change')
        console.log('file',file)
        console.log('fileList',fileList)
        this.fileList = fileList;
        var ids=this.handleUpOrDel(fileList);
      },
      handleRemove(file, fileList){
        console.log('进入on-remove')
        console.log('file',file)
        console.log('fileList',fileList)
        this.fileList = fileList;
        var ids=this.handleUpOrDel(fileList);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      handleUpOrDel(fileList){
        console.log('进入handleUpOrDel')
        console.log('fileList',fileList)
        let ids="";
        if(fileList){
          for(var i =0; i < fileList.length; i++){
            console.log(fileList[i].response,4);
            var obj = fileList[i].response;
            if(obj){
              if(obj.code){
                ids +=obj.record.successResponse[0].id;
                if(i < fileList.length - 1){
                  ids +=",";
                }
              }
            }
          }
        }
        return ids;
      },
      uploadError(err, file, fileList) {
        console.log('进入uploadError')
        console.log('err',err)
        console.log('file',file)
        console.log('fileList',fileList)
        // 上传失败
        this.$message.error(err);
        this.reset();
      },
      uploadSuccess(response, file, fileList) {
        // 上传成功
        if(response.code==='0000'){
          this.$message({
            message: response.message,
            type: 'success'
          });
        }else {
          this.$message({
            message: response.message,
            type: 'error'
          });
        }
        console.log('进入uploadSuccess')
        console.log('response',response);
        console.log('file',file);
        console.log('fileList',fileList);
        this.reset();
      },
      submitUpload() {
        console.log('进入submitUpload')
        this.$refs.upload.submit();
      },
      reset() {
        // 重置
        // 清空多选框
        this.fileList = [];
        // 清空上传列表
        this.$refs.upload.clearFiles();
      }
    }
  }
</script>

<style scoped>

</style>
